import React from 'react'
import {  Layout,theme } from 'antd';
import { DownOutlined,UserOutlined,LogoutOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';
import { useNavigate } from 'react-router-dom';
import { deleteToken } from '../../store/modules/userStore';
import { useDispatch } from 'react-redux';
const { Header} = Layout;

export default function Head() {
  const navigator=useNavigate()
  const dispatch=useDispatch()
  const {
    token: { colorBgContainer},
  } = theme.useToken();

  const items: MenuProps['items'] = [
  {
    key: '/personal',
    label: (
      <a onClick={()=>{
        navigator('/personal')
      }}>
       个人中心
      </a>
    ),
    icon:<UserOutlined />
  },
  {
    key: 'LogOut',
    label: (
      <a onClick={()=>{
        navigator('/login')
        dispatch(deleteToken())
      }}>
        退出登录
      </a>
    ),
    icon:<LogoutOutlined />,
    danger:true
  }
];

  return (
     <Header style={{ padding: 0, background: colorBgContainer}} >
       <div style={{ float:'right',marginRight:`20px`}}>
         <Dropdown menu={{ items }}>
          <a onClick={(e) => e.preventDefault()}>
            <Space>
              欢迎你,{sessionStorage.getItem('username')}
              <DownOutlined />
            </Space>
          </a>
        </Dropdown>
       </div>
    </Header>
  )
}

